<template>
  <div class="page-department">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>导入项目
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
                 <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
        </div>
      </div>
    </div>
    <div class="component-searchHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text">
            <span class="iconfont" style="font-weight:700;margin-right:3px;">&#xe63d;</span>筛选查询
          </p>
          <div class="right">
            <button @click="dataInit">查询</button>
          </div>
        </div>
      </div>
    </div>
    <div class="component-search-box">
      <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
        <el-form-item label="项目专业">
          <el-select v-model="searchForm.type" placeholder="请选择专业" @change="changes" clearable>
            <el-option
              v-for="(item, index) in list"
              :key="index"
              :value="item.const_name"
              :label="item.const_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目状态：">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <!-- 动态生成 -->
            <el-option
              v-for="(item, index) in list1"
              :key="index"
              :value="item.const_code"
              :label="item.const_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目金额：">
          <el-select v-model="searchForm.money" placeholder="请选择金额范围" clearable>
            <el-option label="0~1万" :value="proMon1"></el-option>
            <el-option label="1万-10万" :value="proMon2"></el-option>
            <el-option label="10万-20万" :value="proMon3"></el-option>
            <el-option label="20万-30万" :value="proMon4"></el-option>
            <el-option label="30万-40万" :value="proMon5"></el-option>
            <el-option label="40万-50万" :value="proMon6"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="component-listHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text">
            <span class="iconfont">&#xe61e;</span>
            项目列表
          </p>
          <div class="right">
            <button @click="falseList">虚拟合同项目</button>
            <button @click="subList">分包合同项目</button>
          </div>
        </div>
      </div>
    </div>

    <div class="table">
      <el-table
        ref="multipleTable"
        :data="info"
        tooltip-effect="dark"
        style="width:100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55"></el-table-column>
        <el-table-column label="项目编号" align="center" width="120" prop="proNo"></el-table-column>
        <el-table-column label="项目名称" align="center" width="170" prop="proName"></el-table-column>
        <el-table-column label="项目专业" align="center" width="100" prop="proMajor"></el-table-column>
        <el-table-column label="开工时间" align="center" width="150" prop>
          <template slot-scope="scope">{{scope.row.eworkDate | timeFilter}}</template>
        </el-table-column>
        <el-table-column label="完工时间" align="center" width="150" prop="sworkDate">
          <template slot-scope="scope">{{scope.row.sworkDate | timeFilter}}</template>
        </el-table-column>
        <el-table-column label="项目金额" align="center" width="100"></el-table-column>
        <el-table-column label="项目状态" align="center" width="120" prop="proProgress"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <a @click.prevent="check(scope.row)">查看详情</a>
            <!-- <a @click.prevent="toLead(scope.row.userId)">导入</a> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="component-paging" v-if="info.length > 0">
      <div class="table-bottom">
        <div class="bottom-left">
          <button @click="leader_btn">导入</button>
        </div>
        <div class="paging">
          <div class="paging-left">
            <p>
              共
              <span>{{Math.ceil(total/pageSize)}}</span> 页/
              <span>{{total}}</span> 条数据
            </p>
          </div>
          <el-pagination
            background
            @size-change="SizeChange($event,getproList,currentPage,pageSize)"
            @current-change="CurrentChange($event,getproList,currentPage,pageSize)"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "toLeadPro",
  data() {
    return {
      newArray: {},
      // 项目专业列表
      info: [],
      list: [],
      list1: [],
      limit: true,
      // 数据总条数
      total: 0,
      // 每页显示数据的条数
      pageSize: 10,
      // 当前显示的页面页码
      currentPage: 1,
      searchForm: {
        type: "",
        status: "",
        money: ""
      },
      // 虚拟合同列表
      proList: [],
      // 得到合同剩余金额
      freeMoney: "",
      //  计算得到的 金额
      countMoney: "",
      // 判断那种情况下查询
      flag1: 1,
      flag2: 0,
      // 金额
      proMon1: "0-10000",
      proMon2: "10000-100000",
      proMon3: "100000-200000",
      proMon4: "200000-300000",
      proMon5: "300000-400000",
      proMon6: "400000-500000",
      startBudget: 0,
      endBudget: 0
    };
  },
  created() {
    this.searchInfo();
    this.getInfos();
    this.getInfoss();
  },
  mounted() {
    // 刚进页面展示虚拟合同项目
  },
  methods: {
    searchInfo() {
      this.currentPage = 1;
      this.getproList();
    },
    //  点击更换标识符
    falseList() {
      this.flag1 = 1;
      this.flag2 = 0;
      this.searchForm.type = "";
      this.searchForm.money = "";
      this.searchForm.status = "";
      this.getproList();
    },
    subList() {
      this.flag1 = 0;
      this.flag2 = 1;
      this.searchForm.type = "";
      this.searchForm.money = "";
      this.searchForm.status = "";
      this.getproList();
    },
    //  刚进来获取合同项目列表
    getproList() {
      this.startBudget = this.searchForm.money.split("-")[0];
      this.endBudget = this.searchForm.money.split("-")[1];
      let params = "";
      if (this.flag1 == "1") {
        console.log(this.flag1 + "虚拟合同");
        params = {
          pn: this.currentPage + "",
          psize: this.pageSize + "",
          conType: "2",
          proMajor: this.searchForm.type,
          startPartyBudget: this.startBudget,
          endPartyBudget: this.endBudget,
          proProgress: this.searchForm.status,
          parentId:this.$route.query.rows
        };
      } else if (this.flag1 == "0") {
        console.log(this.flag1 + "获取分包合同");
        params = {
          pn: this.currentPage + "",
          psize: this.pageSize + "",
          conType: "5",
          proMajor: this.searchForm.type,
          startPartyBudget: this.startBudget,
          endPartyBudget: this.endBudget,
          proProgress: this.searchForm.status,
          parentId:this.$route.query.rows
        };
      }
      let that = this;
      let suCb = res => {
        console.log(res);
        that.proList = that.deepClone(res.data.data.list);
        // that.proList =  res.data.data.list
        // 将得到的数组赋值给得的list
        that.info = that.proList;
        that.total = res.data.data.total;
      };
      let erCb = res => {
        console.log(res);
      };
      let req = {
        url: "/api/web/proProject/selectProProjectByConId",
        methods: "post",
        data: params,
        success: suCb,
        error: erCb
      };
      that.$https(req);
    },

    dataInit() {
      this.getproList();
    },
    //  根据选择拿到对应的name
    changes() {
      this.newArray = this.list.find(item => {
        if (item.const_id === this.searchForm.type) {
          return item;
        }
      });
      console.log(this.newArray);
    },
    // 刚进来请求项目专业，项目状态
    getInfos() {
      let that = this;
      let suCb = res => {
        console.log('项目专业',res);
        that.list = res.data.data;
      };
      let erCb = res => {
        console.log(res);
      };
      let params = {
        object: "proMajor"
      };
      let req = {
        url: "/api/web/proProject/selectConst",
        methods: "post",
        data: params,
        success: suCb,
        error: erCb
      };
      that.$https(req);
    },

    getInfoss() {
      let that = this;
      let suCb = res => {
        console.log('项目状态',res);
        that.list1 = res.data.data;
      };
      let erCb = res => {
        console.log(res);
      };
      let params = {
        object: "proProgress"
      };
      let req = {
        url: "/api/web/proProject/selectConst",
        methods: "post",
        data: params,
        success: suCb,
        error: erCb
      };
      that.$https(req);
    },

    //全选
    handleSelectionChange(val) {
      let arr = [];
      if (val.length > 0) {
        val.forEach(item => {
          arr.push(item.proId);
          this.multipleSelection = arr;
        });
      } else {
        this.multipleSelection = [];
      }
    },

    // 导入项目
    leader_btn() {
      if (
        this.multipleSelection != undefined &&
        this.multipleSelection.length >= 1
      ) {
        // 判断剩余金额是否大于合同数 ； 如果是 导入，少于不导入
        // 调取接口
        //  合同页面 传过来 的 得到合同剩余金额
        this.freeMoney = this.$route.query.freeAmount;
         // 得到金额。比较，
        if (this.freeMoney > this.countMoney) {
        this.leaders();

        } else {
          this.$alert("导入的项目必须小于合同剩余金额", "提示", {
            confirmButtonText: "明白了"
          });
        }
        let that = this;
        let params = {
          proId: that.multipleSelection
        };
        let suCb = res => {
          console.log(res.data.data);
          // 得到的剩余金额
          that.countMoney = res.data.data[0].countMoney;
        };
        let erCb = res => {
          console.log(res);
        };
        // console.log(params);
        let req = {
          url: "/api/web/proProject/countProByProIdList",
          methods: "post",
          data: params,
          success: suCb,
          error: erCb
        };
        that.$https(req);
      } else {
        this.$alert("请选择所要导入的项目", "提示", {
          confirmButtonText: "明白了"
        });
      }
    },
    leaders() {
      let that = this;
      let suCb = res => {
        console.log(res);
        // 导入刷新页面
        // that.subList();
      that.$msg("导入成功")
      that.getproList();
      };
      let erCb = res => {
        console.log(res);
      };
      let params = {
        parentId: that.$route.query.conId,
        list: that.multipleSelection
      };
      let req = {
        url: "/api/web/proProject/updateProProjectByProIdList",
        methods: "post",
        data: params,
        success: suCb,
        error: erCb
      };
      that.$https(req);
    },

    check(row){
        this.$router.push({
        name: "detailpro",
         params: {
           info: row.proId,
           tabs:"first"
         }
      });
    }
  }
};
</script>

<style scoped>
.component-mainHeader .top .topright {
  font-size: 24px;
}

.component-searchHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
}

.component-searchHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-searchHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  line-height: 45px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-searchHeader .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

.component-searchHeader .right button {
  padding: 0 15px;
  height: 30px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 12px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-searchHeader .right button:hover {
  background-color: #f3f3f3;
  cursor: pointer;
}

.component-search-box {
  width: 1100px;
  height: 60px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-top: none;
  margin: 0 auto;
  text-align: left;
  padding-left: 30px;
  line-height: 60px;
}

.component-search-box .el-input__inner {
  height: 35px;
  display: inline-block;
}

.component-listHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
  border-bottom: 0;
}

.component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  line-height: 45px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-listHeader .search-header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  width: 120px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-listHeader .search-header .right button:hover {
  background-color: #f3f3f3;
  cursor: pointer;
}

.component-listHeader .search-header .right .right-select-margin {
  margin-top: 6px;
  margin-right: 8px;
}

.table {
  width: 1100px;
  margin: 0 auto;
}

/* 下面都是修改饿了么ui的下拉框和按钮选中后的样式 */

.el-select .el-input.is-focus .el-input__inner,
.el-select .el-input__inner:focus {
  border-color: #e4e4e4;
}

.el-select-dropdown__item.selected {
  color: #666;
  font-weight: 400;
}

.el-select-dropdown {
  min-width: 100px !important;
  top: 50px !important;
  margin-left: 5px;
}
.el-select-dropdown__item {
  height: 26px;
  line-height: 26px;
}

.el-select .el-input__inner {
  width: 100px;
  padding: 0 8px;
  height: 30px;
  margin: 6px 5px;
}

.el-table .cell a {
  color: #1abc9a;
  text-decoration: none;
  cursor: pointer;
  margin-left: 5px;
}
.bottom-left button:hover {
  cursor: pointer;
}
</style>
